<template>
  <div class="page">

    <!-- 每日报表数据 开始 -->
    <div class="top_info daily_top">
      <div class="left_box">
        <div class="title daily_title">
          <span>每日报表数据</span>
          <div class="">
            <el-date-picker v-model="dailyTime" size="small" type="daterange" @change="getDaily" value-format="yyyy-MM-dd" :clearable="false" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <!-- <el-button size="small" icon="el-icon-download" :loading="loading" class="down_btn" @click="downloadExcel('day')">导出EXCEL</el-button> -->
            <auth-button size="small" uid="1010401" icon="el-icon-download" :loading="loading" class="down_btn" @click.native="downloadExcel('day')">导出EXCEL</auth-button>
          </div>
        </div>

        <div class="table_box" border>
          <el-table class="el_table" width="100%" :data="dailyList" show-summary :summary-method="summaryMethods">
            <el-table-column label="日期" prop="statDate"></el-table-column>
            <el-table-column label="新增客户数" prop="newCustomerCnt">
              <template slot-scope="{row}">{{row.newCustomerCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增预约数" prop="newAppointmentCnt">
              <template slot-scope="{row}">{{row.newAppointmentCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增到店数" prop="newArrivedCnt">
              <template slot-scope="{row}">{{row.newArrivedCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增成交数" prop="newDealCnt">
              <template slot-scope="{row}">{{row.newDealCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增成交金额" prop="dealAmount">
              <template slot-scope="{row}">{{row.dealAmount||0}}</template>
            </el-table-column>
            <el-table-column label="新增收款金额" prop="collectMoney">
              <template slot-scope="{row}">{{row.collectMoney||0}}</template>
            </el-table-column>
            <el-table-column label="线索预约率" prop="clueAppointmentRate">
              <template slot-scope="{row}">{{row.clueAppointmentRate?row.clueAppointmentRate.toFixed(0):row.clueAppointmentRate}}%</template>
            </el-table-column>
            <el-table-column label="总跟进次数" prop="followUpCnt">
              <template slot-scope="{row}">{{row.followUpCnt||0}}</template>
            </el-table-column>
            <el-table-column label="无效客户数" prop="invalidCustomerCnt">
              <template slot-scope="{row}">{{row.invalidCustomerCnt||0}}</template>
            </el-table-column>
            <el-table-column label="流失客户数" prop="drainCustomerCnt">
              <template slot-scope="{row}">{{row.drainCustomerCnt||0}}</template>
            </el-table-column>
            <el-table-column label="加入公海客户数" prop="addOpenSeaCustomerCnt">
              <template slot-scope="{row}">{{row.addOpenSeaCustomerCnt||0}}</template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
    <!-- 每日报表数据 end -->

    <!-- 顾问报表数据 开始 -->
    <div class="top_info daily_top">
      <div class="left_box">
        <div class="title daily_title">
          <span>顾问报表数据</span>
        </div>
        <div class="select_list">
          <el-form :model="counselor" size="small" inline>
            <el-form-item label="城市：">
              <city-select v-model="counselor.cities"></city-select>
            </el-form-item>
            <el-form-item label="客户需求：">
              <project-select v-model="counselor.projects"></project-select>
            </el-form-item>
            <el-form-item label="客户来源：">
              <user-source v-model="counselor.clueSources"></user-source>
            </el-form-item>
            <el-form-item label="广告代号：">
              <adcode-select v-model="counselor.adSources"></adcode-select>
            </el-form-item>
            <el-form-item label="所属部门：">
              <depart-ment v-model="counselor.departmentId" @change="onChange"></depart-ment>
            </el-form-item>
            <el-form-item label="时间：">
              <el-date-picker v-model="counselor.dayTime" size="small" type="daterange" value-format="yyyy-MM-dd" :clearable="false" :picker-options="cpickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="searchCustomer">搜索</el-button>
            </el-form-item>
            <el-form-item label="">
              <el-button type="default" @click="clearSearch">清除筛选</el-button>
            </el-form-item>
            <el-form-item label="">
              <auth-button size="small" uid="1010402" icon="el-icon-download" :loading="loading" class="down_btn" @click.native="downloadExcel('customer')">导出EXCEL</auth-button>
            </el-form-item>
          </el-form>
          <!-- <el-button size="small" icon="el-icon-download" :loading="loading" class="down_btn" @click="downloadExcel('customer')">导出EXCEL</el-button> -->
        </div>

        <div class="table_box" size="mini" border>
          <el-table class="el_table" :data="consultantList" show-summary :summary-method="summaryMethods">
            <el-table-column label="姓名" prop="consultant"></el-table-column>
            <el-table-column label="新增客户数" prop="newCustomerCnt">
              <template slot-scope="{row}">{{row.newCustomerCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增预约数" prop="newAppointmentCnt">
              <template slot-scope="{row}">{{row.newAppointmentCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增到店数" prop="newArrivedCnt">
              <template slot-scope="{row}">{{row.newArrivedCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增成交数" prop="newDealCnt">
              <template slot-scope="{row}">{{row.newDealCnt||0}}</template>
            </el-table-column>
            <el-table-column label="新增成交金额" prop="dealAmount">
              <template slot-scope="{row}">{{row.dealAmount||0}}</template>
            </el-table-column>
            <el-table-column label="新增收款金额" prop="collectMoney">
              <template slot-scope="{row}">{{row.collectMoney||0}}</template>
            </el-table-column>
            <el-table-column label="线索预约率" prop="clueAppointmentRate">
              <template slot-scope="{row}">{{row.clueAppointmentRate?row.clueAppointmentRate.toFixed(0):row.clueAppointmentRate}}%</template>
            </el-table-column>
            <el-table-column label="总跟进次数" prop="followUpCnt">
              <template slot-scope="{row}">{{row.followUpCnt||0}}</template>
            </el-table-column>
            <el-table-column label="无效客户数" prop="invalidCustomerCnt">
              <template slot-scope="{row}">{{row.invalidCustomerCnt||0}}</template>
            </el-table-column>
            <el-table-column label="流失客户数" prop="drainCustomerCnt">
              <template slot-scope="{row}">{{row.drainCustomerCnt||0}}</template>
            </el-table-column>
            <el-table-column label="加入公海客户数" prop="addOpenSeaCustomerCnt">
              <template slot-scope="{row}">{{row.addOpenSeaCustomerCnt||0}}</template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
    <!-- 顾问报表数据 end -->

  </div>
</template>
<script>
import {
  GETREPORTDAILYLIST,
  GETREPORTCONSULTANTLIST,
  GETREPORTEXPORTDAILY,
  GETREPORTEXPORTCONSULTANT,
} from "@/http/system";
import { exportExcel } from "@/common/common";
// import AuthButton from "@/components/auth-button";
import moment from "moment";
// import CitySelect from "@/components/select/city";
// import UserSource from "@/components/select/source";
// import ProjectSelect from "@/components/select/project";
// import AdcodeSelect from "@/components/select/adCode";
import { deepClone } from "@/common/util";
export default {
  // components: {
  //   AuthButton,
  //   CitySelect,
  //   UserSource,
  //   ProjectSelect,
  //   AdcodeSelect,
  // },
  data() {
    return {
      dayTime: [],
      pageNumber: 1,
      pageSize: 10,
      dailyList: [],
      choiceDate: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.choiceDate) {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.choiceDate - one;
            const maxTime = this.choiceDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      cDate: "",
      cpickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cDate = minDate.getTime();
          if (maxDate) {
            this.cDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.cDate) {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cDate - one;
            const maxTime = this.cDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      dailyTime: [],
      consultantList: [],
      loading: false,
      counselor: {},
    };
  },
  created() {
    let n = moment().format("yyyy-MM-DD");
    let min = moment().subtract(30, "days").format("YYYY-MM-DD");
    this.$set(this.counselor, "dayTime", [n, n]);
    //this.dayTime = [n, n];
    this.dailyTime = [min, n];
  },
  mounted() {
    this.getDaily();
    this.getList();
  },
  methods: {
    // 获取顾问参数
    getParams() {
      let oParams = deepClone(this.counselor);
      let n = oParams.dayTime || [];
      if (n && n.length > 0) {
        oParams.beginDate = n[0];
        oParams.endDate = n[1];
      }
      delete oParams.dayTime;
      return oParams;
    },

    // 获取日报表
    getDaily(e) {
      console.log(e);
      let n = this.dailyTime || [];
      let oParams = {};
      oParams.beginDate = e ? e[0] : n[0];
      oParams.endDate = e ? e[1] : n[1];
      GETREPORTDAILYLIST(oParams).then((res) => {
        this.dailyList = res.data || [];
      });
    },

    // 获取顾问数据
    getList(e) {
      console.log(e);
      let oParams = this.getParams();
      GETREPORTCONSULTANTLIST(oParams).then((res) => {
        this.consultantList = res.data || [];
      });
    },

    // 自定义统计方法
    summaryMethods({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });
      if (sums[1] != 0) {
        sums[7] = ((sums[2] / sums[1]) * 100).toFixed(0) + "%";
      } else {
        sums[7] = "0%";
      }
      return sums;
    },

    // 导出日报表
    downloadExcel(id) {
      let _this = this;
      let oParams = {};
      let options = {};

      let n = this.dayTime || [];
      let m = this.dailyTime || [];
      if (m && m.length > 0) {
        oParams.beginDate = m[0] || "";
        oParams.endDate = m[1] || "";
      }

      if (id == "customer" && n && n.length > 0) {
        oParams.beginDate = n[0] || "";
        oParams.endDate = n[1] || "";
      }

      options.url = GETREPORTEXPORTDAILY;
      options.fileName = "每日报表数据.xlsx";
      _this.loading = true;

      if (id == "customer") {
        options.url = GETREPORTEXPORTCONSULTANT;
        options.fileName = "顾问报表数据.xlsx";
      }

      options.method = "GET";
      options.data = oParams;
      exportExcel(options).then((res) => {
        _this.loading = false;
      });
    },

    // 搜索顾问列表数据
    searchCustomer() {
      this.getList();
    },

    // 监听组织树
    onChange(id) {
      //this.$set(this.counselor, "departmentId", id);
    },

    // 清除筛选
    clearSearch() {
      let n = moment().format("yyyy-MM-DD");
      this.counselor = { dayTime: [n, n] };
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/hospital.scss";
.select_list {
  display: flex;
  align-items: center;
  padding: 0 24px;
}
</style>